<template>
  <div>
    <Modal v-model='showStatus' title='批量设置' @on-ok='ok' @on-cancel='cancel'>
      <Form :model='localItem' :label-width='80' ref='table'>
        <FormItem label='角色'>
          <Select v-model='localItem.roles' multiple>
            <Option
              v-for='(item,index) in roles'
              :value='item.id'
              :key="'roles-' + index"
            >{{ item.displayName }}
            </Option>
          </Select>
        </FormItem>
        <FormItem label='是否启用' prop='enabled'>
          <Switch size='large' v-model='localItem.enabled'>
            <span slot='open'>开启</span>
            <span slot='close'>关闭</span>
          </Switch>
        </FormItem>
        <!--        <FormItem label='是否是VIP'>-->
        <!--          <RadioGroup v-model='localItem.isVip'>-->
        <!--            <Radio label>不设置</Radio>-->
        <!--            <Radio label='0'>否</Radio>-->
        <!--            <Radio label='1'>是</Radio>-->
        <!--          </RadioGroup>-->
        <!--        </FormItem>-->
      </Form>
    </Modal>
  </div>
</template>
<script>
export default {
  props: {
    isShow: {
      type: Boolean,
      default: false
    },
    roles: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    isShow() {
      this.showStatus = this.isShow
    }
  },
  data() {
    return {
      showStatus: false,
      localItem: {
        enabled: false,
        // isVip: '',
        roles: ['user']
      }
    }
  },
  methods: {
    ok() {
      // this.$refs.table.resetFields()
      this.$emit('changeEvent', false)
      const result = {}
      for (const key of Object.keys(this.localItem)) {
        if (this.localItem[key] !== '') {
          result[key] = this.localItem[key]
        }
      }
      this.$emit('editEvent', result)
      this.$Message.info('设置成功！')
    },
    cancel() {
      this.$refs.table.resetFields()
      this.$emit('changeEvent', false)
      this.$Message.info('取消设置！')
    }
  }
}
</script>
